<template>
  <div class="store-welcome">
		<van-swipe :loop='false'>
			<van-swipe-item>
				<img v-if="isBigScreen" src="./imgs/wel-big-1.png" alt="">
				<img v-else src="./imgs/wel-1.jpg" alt="">
			</van-swipe-item>
			<van-swipe-item>
				<img v-if="isBigScreen" src="./imgs/wel-big-2.png" alt="">
				<img v-else src="./imgs/wel-2.jpg" alt="">
			</van-swipe-item>
			<van-swipe-item>
				<img v-if="isBigScreen" src="./imgs/wel-big-3.png" alt="">
				<img v-else src="./imgs/wel-3.jpg" alt="">
			</van-swipe-item>
			<van-swipe-item>
				<img v-if="isBigScreen" src="./imgs/wel-big-4.png" alt="">
				<img v-else src="./imgs/wel-4.jpg" alt="">
			</van-swipe-item>
			<van-swipe-item class="last-item">
				<img v-if="isBigScreen" src="./imgs/wel-big-5.png" alt="">
				<img v-else src="./imgs/wel-5.jpg" alt="">
				<div class="btn" :class="{'isbig':isBigScreen}"  @click="begin"></div>
			</van-swipe-item>
		</van-swipe>
		<div class="skip" @click="begin">跳过</div>
	</div>
</template>
<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";

Vue.use(Swipe).use(SwipeItem);
export default {
	data:{
		currentVersion: ''
	},
	mounted() {
		this.onPlusReady(() => {
			this.currentVersion = plus.runtime.version
		});
	},
	methods:{
		begin(){
			let oldVersionList = localStorage.getItem('INIT_VERSION') ? JSON.parse(localStorage.getItem('INIT_VERSION')) : []
			if(!oldVersionList.includes(this.currentVersion)){
				oldVersionList.push(this.currentVersion)
				localStorage.setItem('INIT_VERSION',JSON.stringify(oldVersionList))
			}
			this.$router.replace('/main/home')
		}
	}
};
</script>


<style lang="scss" scoped>
	.store-welcome{
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 2000;
		.skip{
			position: absolute;
			right: 20px;
			top: 44px;
			z-index: 10;
			text-align: center;
			background: #efefef;
			width: 60px;
			height: 26px;
			line-height: 26px;
			border-radius: 14px;
		}
		.van-swipe{
			height: 100%;
		}
		.van-swipe-item{
			img{
				width: 100%;
				height: 100%;
			}
		}
		.last-item{
			position: relative;
			.btn{
				width:160px;
				height: 44px;
				position: absolute;
				bottom: 116px;
				left: 50%;
				margin-left: -80px;
				&.isbig{
					bottom: 186px;
				}
			}
		}
		/deep/.van-swipe__indicators{
			bottom: 44px;
			.van-swipe__indicator{
				background: $tips-clr;
			}
			.van-swipe__indicator--active{
				background: $primary-clr;
			}
		}	
	}
</style>